﻿@model List<CashOrCard.Models.Promotion>

@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        #fm
        {
            margin: 0;
            padding: 10px 30px;
        }

        .ftitle
        {
            font-size: 14px;
            font-weight: bold;
            padding: 5px 0;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }


        .fitem
        {
            clear: both;
            margin-bottom: 2px;
            min-height: 28px;
            position: relative;
        }


            .fitem label
            {
                display: inline-block;
                width: 100px;
            }

        .uploading
        {
            border: 1px #ccc;
            border-style: dotted;
            width: 35px;
            height: 35px;
            background: #fff;
            position: relative;
            float: left;
        }

        .uploading_file_name
        {
            width: 160px;
            float: left;
        }

        .uploading_schedule
        {
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .uploading img
        {
            width: 32px;
            height: 32px;
            /*vertical-align: middle;*/
            padding: 1px;
        }

        .uploadify
        {
            left: 103px;
            position: absolute;
            top: 0;
            background-repeat: no-repeat;
            (-bracket-:hack;
        left: 108px;
    );
        }

        .uploading a
        {
            color: #444444;
            font-size: 12px;
            left: 31px;
            position: absolute;
            text-decoration: none;
            top: -4px;
        }

        #div_img_list
        {
            float: right;
            margin-right: 138px;
            margin-right: 148px\9;
            (-bracket-:hack;
                margin-right:125px
            );
        }
    </style>

    <script type="text/javascript">
        $(function () {
            var imageUploadField = 'PromotionImage';
            var uploaderUrl = '/PromotionAdmin/Upload';
            var valueField = 'PromotionImagePath';
            var buttonImage = '/images/upload.png';
            var isSignalImage = true;
            var imgDiv = 'div_img_list';
            UploadImage(imageUploadField, valueField, uploaderUrl, buttonImage, isSignalImage, imgDiv);
        });

        var url;
        function newPromotion() {
            $('#dlg').dialog('open').dialog('setTitle', 'Add Promotion');
            $('#fm').form('clear');
            $("#div_img_list").html('');
            url = '/PromotionAdmin/AddNewPromotion/?advtId=' + '@TempData["advtId"]';
        }

        function editPromotion() {

            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $('#dlg').dialog('open').dialog('setTitle', 'Edit Promotion');
                initData(row);
                $('#fm').form('load', row);
                url = '/PromotionAdmin/UpdatePromotion/?advtId=' + '@TempData["advtId"]';
            }
            else {
                $.messager.alert("Message", "Please select one record.");
            }
        }

        function savePromotion() {
            var postdata = {
                PromotionId: $("#PromotionId").val(),
                PromotionName: $("#PromotionName").val(),
                PromotionBody: $("#PromotionBody").val(),
                PromotionImagePath: $("#PromotionImagePath").val(),
                StartDate: $("#StartDate").datebox('getValue'),
                EndDate: $("#EndDate").datebox('getValue')
            };

            $.ajax({
                type: "POST",
                url: url,
                data: postdata,
                beforeSend: function () {
                    return $('#fm').form('validate');
                },
                success: function (result) {
                    if (result != "success") {
                        $.messager.show({
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    } else {
                        $.messager.alert("Message", "Successfully");
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $("#div_img_list").html('');
                    }
                }
            });
        }
        function removePromotion() {
            var row = $('#dg').datagrid('getSelected');
            if (row) {
                $.messager.confirm('Confirm', 'Are you sure you want to remove this promotion?', function (r) {
                    if (r) {
                        $.post('/PromotionAdmin/DeletePromotion', { id: row.PromotionId }, function (result) {
                            if (result == "success") {
                                $.messager.alert("Message", "Delete Successfully");
                                $('#dg').datagrid('reload');
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: 'Please contact the admin for support'
                                });
                            }
                        }, 'text');
                    }
                });
            }
            else {
                $.messager.alert("Message", "Please select one record.");
            }
        }

        function cellStyler(value, row, index) {
            var imageSrc = value;
            return '<img alt="" src="' + imageSrc + '" height="30px" width="30px" />';
        }

        function initData(row) {
            var startDate = ToJavaScriptDate(row['StartDate']);
            var endDate = ToJavaScriptDate(row['EndDate']);
            $("#StartDate").datebox('setValue', startDate);
            $("#EndDate").datebox('setValue', endDate);
            var imageSrc = row['PromotionImagePath'];
            $("#div_img_list").html('<img alt="" src="' + imageSrc + '" height="80px" width="80px" />');
            $("#PromotionImagePath").val(row['PromotionImagePath']);
        }

        function doSearch() {
            $('#dg').datagrid('load', {
                PromotionName: $('#searchName').val(),
                StartDate: $("#searchStartDate").datebox('getValue'),
                EndDate: $("#searchEndDate").datebox('getValue')
            });
        }

        $.extend($.fn.validatebox.defaults.rules, {
            date: {
                validator: function (value, param) {
                    var d1 = $.fn.datebox.defaults.parser($("#" + param[0].id).datebox('getValue'));
                    var d2 = $.fn.datebox.defaults.parser(value);
                    return d2 >= d1;
                },
                message: 'The date must be less than or equals previous date.'
            },
            same: {
                validator: function (value, param) {
                    if ($("#" + param[0]).val() != "" && value != "") {
                        return $("#" + param[0]).val() == value;
                    } else {
                        return true;
                    }
                },
                message: 'The password must be same.'
            }
        });
        function cellStyler1(value, row, index) {
            return '<a id="viewComments"  href="/PromotionComment/Index/?promotionId=' + value + '"> View Comments</a>';
        }

        function viewComments(promoId) {
            var title = 'View Comments - Promotions ID:' + promoId;
            var content = '<iframe id="frmWorkArea" width="100%" height="95%" frameborder="0" scrolling="yes" src="/PromotionComment/Index/' + promoId + '"></iframe>';
            self.parent.addTab(title, content);
        }

    </script>
</head>
<body>
    <div>
        <table id="promotionlist"></table>
    </div>

    <table id="dg" title="Promotion Admin" class="easyui-datagrid" style="height: 500px"
        url="/PromotionAdmin/GetAllPromotions/?advtId=@TempData["advtId"]"
        toolbar="#toolbar" pagination="true" iconcls="icon-ok"
        rownumbers="true" fitcolumns="true" singleselect="true">
        <thead>
            <tr>
                <th field="PromotionName" width="50">Promotion Name</th>
                <th field="PromotionBody" width="50">Promotion Body</th>
                @*<th field="PromotionImagePath" width="50" formatter="cellStyler">Promotion Image</th>*@
                <th field="StartDate" width="30" formatter="ToJavaScriptDate">Start Date</th>
                <th field="EndDate" width="30" formatter="ToJavaScriptDate">End Date</th>
                <th field="PromotionId" width="50" formatter="cellStyler1">View Comments</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="/AdvtAdmin/Index" class="easyui-linkbutton" iconcls="icon-back" plain="true" style="font-weight: bold; ">Return to Site</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newPromotion()">New Promotion</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editPromotion()">Edit Promotion</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="removePromotion()">Remove Promotion</a>
        &nbsp;&nbsp;&nbsp;<span style="font-weight:bold">
        @{
            if (ViewBag.advtEntity != null)
            {
                <strong>
                    Site Name:  @ViewBag.advtEntity.SiteName
                </strong>        
            }
        }
            </span>
        <div style="margin-left: 10px">
            Promotion Name:
            <input id="searchName" style="width: 150px">
            Start Date:
            <input id="searchStartDate" class="easyui-datebox" style="width: 100px">
            End Date:
            <input id="searchEndDate" class="easyui-datebox" style="width: 100px">
            <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'" onclick="doSearch()">Search</a>
        </div>
    </div>

    <div id="dlg" class="easyui-dialog" style="width: 500px; height: 300px; padding: 10px 20px"
        closed="true" buttons="#dlg-buttons" dataoption="shadow:true" modal="true">
        <div class="ftitle">Promotion Information</div>
        <form id="fm" method="post" novalidate>
            <input id="PromotionId" name="PromotionId" type="hidden">
            <div class="fitem">
                <label>Promotion Name:</label>
                <input id="PromotionName" name="PromotionName" class="easyui-validatebox" required="true">
            </div>

          @*  <div class="fitem">
                <label>Promotion Image:</label>
                <input id="PromotionImage" name="PromotionImage" type="file" />
                <input id="PromotionImagePath" type="hidden" />
                <div id="div_img_list"></div>
            </div>*@
            <div class="fitem">
                <label>Start Date:</label>
                <input class="easyui-datebox" id="StartDate" required="true" />
            </div>
            <div class="fitem">
                <label>End Date:</label>
                @*<input id="EndDate" class="easyui-datebox" required validtype="date[StartDate]" />*@
                <input id="EndDate" class="easyui-datebox" required="true" />
            </div>
            <div class="fitem">
                <label style="vertical-align: middle; display: inline-block;">Promotion Body:</label>
                <textarea id="PromotionBody" name="PromotionBody" style="height: 50px;"></textarea>
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="savePromotion()">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
    </div>
</body>
</html>
